<!-- 时空推进控制器组件 -->
<template>
  <div class="time-controller">
    <!-- 时间轴控制 -->
    <div class="time-axis">
      <div class="time-info">
        <span class="current-time">{{ formatTime(currentTime) }}</span>
        <span class="time-scale">时间倍速: {{ timeScale }}x</span>
      </div>
      
      <el-slider
        :model-value="timeProgress"
        :max="100"
        :step="0.1"
        show-tooltip
        class="time-slider"
        @update:model-value="timeProgress = $event"
      />
      
      <div class="time-range">
        <span>{{ formatTime(startTime) }}</span>
        <span>{{ formatTime(endTime) }}</span>
      </div>
    </div>

    <!-- 速度控制 -->
    <div class="speed-controller">
      <div class="speed-label">仿真速度</div>
      <div class="speed-buttons">
        <el-button-group>
          <el-button 
            v-for="speed in speedOptions" 
            :key="speed.value"
            size="small"
            :type="timeScale === speed.value ? 'primary' : ''"
            @click="setTimeScale(speed.value)"
          >
            {{ speed.label }}
          </el-button>
        </el-button-group>
      </div>
      
      <el-slider
        :model-value="timeScale"
        :min="0.1"
        :max="10"
        :step="0.1"
        show-input
        :show-input-controls="false"
        class="speed-slider"
        @update:model-value="handleSpeedChange"
      />
    </div>

    <!-- 关键时刻标记 -->
    <div class="key-moments">
      <div class="moments-header">
        <span>关键时刻</span>
        <el-button size="small" text @click="addKeyMoment">
          <el-icon><Plus /></el-icon>
        </el-button>
      </div>
      <div class="moments-list">
        <div 
          v-for="moment in keyMoments" 
          :key="moment.id"
          class="moment-item"
          @click="jumpToMoment(moment)"
        >
          <el-icon><Location /></el-icon>
          <span class="moment-time">{{ formatTime(moment.time) }}</span>
          <span class="moment-desc">{{ moment.description }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Location } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  currentTime: {
    type: Number,
    default: 0
  },
  startTime: {
    type: Number,
    default: 0
  },
  endTime: {
    type: Number,
    default: 86400
  },
  timeScale: {
    type: Number,
    default: 1
  }
})

// Emits
const emit = defineEmits([
  'update:currentTime',
  'update:timeScale', 
  'timeChange',
  'speedChange'
])

// 时间进度（百分比）
const timeProgress = computed({
  get: () => props.currentTime / props.endTime * 100,
  set: (value) => {
    const newTime = (value / 100) * props.endTime
    emit('update:currentTime', newTime)
    emit('timeChange', newTime)
  }
})

// 速度选项
const speedOptions = [
  { label: '0.1x', value: 0.1 },
  { label: '0.5x', value: 0.5 },
  { label: '1x', value: 1 },
  { label: '2x', value: 2 },
  { label: '5x', value: 5 },
  { label: '10x', value: 10 }
]

// 关键时刻
const keyMoments = ref([
  { id: 1, time: 3600, description: '雷达开机' },
  { id: 2, time: 7200, description: '目标发现' },
  { id: 3, time: 10800, description: '威胁识别' }
])

// 方法定义
const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = Math.floor(seconds % 60)
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

const handleTimeChange = (value) => {
  const newTime = (value / 100) * props.endTime
  emit('update:currentTime', newTime)
  emit('timeChange', newTime)
}

const handleSpeedChange = (value) => {
  emit('update:timeScale', value)
  emit('speedChange', value)
}

const setTimeScale = (scale) => {
  emit('update:timeScale', scale)
  emit('speedChange', scale)
  ElMessage.info(`仿真速度已设置为 ${scale}x`)
}

const addKeyMoment = () => {
  const newMoment = {
    id: Date.now(),
    time: props.currentTime,
    description: `时刻标记 ${keyMoments.value.length + 1}`
  }
  keyMoments.value.push(newMoment)
  ElMessage.success('关键时刻已添加')
}

const jumpToMoment = (moment) => {
  emit('update:currentTime', moment.time)
  emit('timeChange', moment.time)
  ElMessage.info(`已跳转到 ${moment.description}`)
}
</script>

<style scoped>
.time-controller {
  padding: 2vh 1.5vw;
  height: 100%;
  overflow-y: auto;
}

/* 时间轴控制 */
.time-axis {
  margin-bottom: 3vh;
}

.time-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
}

.current-time {
  font-size: 1.2rem;
  font-weight: 600;
  color: #409EFF;
}

.time-scale {
  font-size: 0.9rem;
  color: #8591a3;
}

.time-slider {
  margin: 1vh 0;
}

.time-range {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #8591a3;
}

/* 速度控制器 */
.speed-controller {
  margin-bottom: 3vh;
}

.speed-label {
  font-size: 0.9rem;
  color: #bfcbd9;
  margin-bottom: 1vh;
}

.speed-buttons {
  margin-bottom: 1.5vh;
}

.speed-buttons .el-button-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5vh;
  width: 100%;
}

.speed-buttons .el-button {
  font-size: 0.8rem;
}

.speed-slider {
  margin-top: 1vh;
}

/* 关键时刻 */
.key-moments {
  background: #1f2d3d;
  border-radius: 0.8vh;
  padding: 1.5vh;
}

.moments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
  font-size: 0.9rem;
  color: #bfcbd9;
}

.moments-list {
  max-height: 20vh;
  overflow-y: auto;
}

.moment-item {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  padding: 0.8vh 0;
  cursor: pointer;
  border-radius: 0.4vh;
  transition: background-color 0.2s;
}

.moment-item:hover {
  background: #2d3a4b;
}

.moment-time {
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 0.8rem;
  color: #409EFF;
  min-width: 6vw;
}

.moment-desc {
  font-size: 0.8rem;
  color: #bfcbd9;
}

/* 滚动条样式 */
:deep(*)::-webkit-scrollbar {
  width: 6px;
}

:deep(*)::-webkit-scrollbar-track {
  background: #1f2d3d;
  border-radius: 3px;
}

:deep(*)::-webkit-scrollbar-thumb {
  background: #2d3a4b;
  border-radius: 3px;
  transition: background 0.3s ease;
}

:deep(*)::-webkit-scrollbar-thumb:hover {
  background: #409EFF;
}
</style>